<template>
  <div class=actor-template>
    <el-image :src="actorImage"/>
    <sn-text :text="actorName" class="margin-top" :move-right="45"/>
    <div class="role" v-if="actorRole !== ''">
      <span>饰 </span>
      <span class="margin-right">:</span>
      <span>{{ actorRole }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ActorTemplate",
  props: {
    actorImage: {
      type: String,
      default: 'https://p0.meituan.net/moviemachine/b163e15051141cfc3d92ecd771d88cfc172015.jpg@128w_170h_1e_1c'
    },
    actorName: {
      type: String,
      default: '王智'
    },
    actorRole: {
      type: String,
      default: ''
    }
  },
}
</script>

<style scoped>
.actor-template {
  margin-right: 20px;
  margin-bottom: 10px;
}

.role {
  color: #666666;
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}
</style>